<template>
  <div class="editinfo" id = "bgc">
    <MMNavBar
     :back="backUrl"
     :title="title"
    @click-right="saveEdit"
     rightText="保存"></MMNavBar>
      <div class="main-container">
        <!-- 头像,上传组件部分 -->
        <!--afterRead 上传文件的回调函数 -->
        <van-uploader
        v-if="$route.query.prop === 'avatar'"
        v-model="files"
        :after-read="afterRead"
        :max-count="1"
      />
        <!-- 文字部分 -->
        <van-field v-else v-model="value" placeholder="请输入用户名" />
      </div>
  </div>
</template>

<script>
import MMNavBar from '@/components/MMNavBar'
import { editUserInfo, uploadAvatar } from '../../api/my'
import { mapMutations, mapGetters } from 'vuex'
export default {
  name: 'editinfo',
  components: {
    MMNavBar
  },
  data () {
    return {
      value: '',
      title: '修改昵称',
      // 上传组件使用到的数据
      files: [],
      // 默认的返回值是userInfo
      backUrl: '/userInfo'
    }
  },
  created () {
    // 首先把存在url地址中的数据取回来
    const { prop, redirect } = this.$route.query
    // 动态的修改标题
    // if (prop === 'nickname') {
    //   this.title = '修改昵称'
    // } else {
    //   this.title = '修改简介'
    // } 换一种方式
    const titleMap = {
      nickname: '修改昵称',
      intro: '修改简介',
      position: '修改岗位',
      avatar: '修改头像'
    }
    this.title = titleMap[prop]
    // 修改value的值,后面引用的都是store中的数据,就是输入框中显示的那一大坨
    // 这里使用了属性名表达式
    this.value = this.$store.state.userInfo[prop]
    // 头像的files值,是默认的值,就是如果有头像,页面一打开,就给他显示出来
    // 这个上传组件自己内部定义的图像的格式就是这样的,是一个数组里面套一个个对象
    // 里面可以存很多的对象,现在默认页面一打开,就选第一个的地址来做它的图片显示的地址
    // files: [
    //   {url:   }
    //   {url:   }
    //   {url:   }
    // ],
    this.files[0] = {
      // 正常的默认值就是这个,可以使用mapGetter辅助函数来做,放到computed中
      // url: this.$store.state.avatarUrl  这个地址是没有基地址的,需要再加一个基地址才行
      // 这里就可以直接调用this.avatarUrl,这个是在getters里面定义好的
      // 也是调用了mapGetters方法,然后在计算属性中合并之后才算出来的结果
      // 要知道这句代码是如何起作用的
      url: this.avatarUrl
    }
    // 如果有redirect 那就返回来时的页面(my页面,因为只有它携带了redirect)
    // 如果没有,就返回默认的地址,就是userInfo,这里可以确认前面的结构赋值可以赋之前没有的内容
    if (redirect) {
      this.backUrl = `/${redirect}`
    }
  },
  methods: {
    ...mapMutations(['CHANGEPROP']),
    // 上传文件的回调函数
    afterRead (data) {
      // 把文件当做参数传递给接口
      console.log(data)
      uploadAvatar(data.file).then(res => {
        // console.log(res)
        // console.log(res.data)
        // 把id存储起来,后期修改接口 头像需要用到
        // 结构这么奇怪的原因是因为数据结构很奇怪
        // 需要的数据就在两层data下面的第一个对象,然后获取它的id
        this.value = res.data.data[0].id
      })
    },
    saveEdit () {
      console.log(123)
      this.$toast.loading('修改中.....')
      // 需要被修改的属性名,有就解析,没有就不会显示
      const { prop, redirect } = this.$route.query
      const data = {
        [prop]: this.value
      }
      // 发送请求
      editUserInfo(data).then(res => {
        if (res.data.code === 200) {
          // 服务器改成功
          this.$toast.success('修改成功')
          // 如果是头像,修改属性值,因为头像的值和普通的值不一样
          let propValue = ''
          if (prop === 'avatar') {
            // 修改头像 如果还用this.value 那么回去的是一大堆地址的数字表达,不是图片
            propValue = res.data.data.avatar
          } else {
            // 文本修改
            propValue = this.value
          }
          // 本地修改 vuex
          this.CHANGEPROP({
            propName: prop,
            // propValue: this.value
            propValue
          })
          if (redirect) {
            return this.$router.replace(`/${redirect}`)
          }
          // 返回用户资料页面
          this.$router.replace('/userInfo')
        }
      })
    }
  },
  // 计算属性
  computed: {
    // 调用仓库中图片地址的计算属性
    ...mapGetters(['avatarUrl'])
  }
}
</script>

<style lang='less'>
.editinfo {
  .main-container {
    padding-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    .van-field {
      background-color: @bg-color;
      padding: 0;
    }
  }
}
</style>
